import React, { ReactNode } from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

// 图表、数据显示区

type Props = {
  [str: string]: ReactNode;
  Chart?: ReactNode;
  Data?: ReactNode;
  SQL?: ReactNode;
};

const App: React.FC<Props> = (props) => {
  let idx = 1;
  const tabItems: TabsProps['items'] = [];

  for (const key in props) {
    if (Object.prototype.hasOwnProperty.call(props, key)) {
      if (props[key] === undefined) {
        continue;
      }
      tabItems.push({
        key: idx.toString(),
        label: key,
        children: props[key],
      });
      idx++;
    }
  }

  const items: TabsProps['items'] = tabItems;

  return <Tabs defaultActiveKey="1" items={items} />;
};

export default App;
